/*ESTILOS GENERALES*/
*{
  margin: 0;
  padding: 0;
  font-family: "Sarabun", serif;
  font-weight: 300;
  font-style: normal;
}

/*Encabezados*/
h1{
  color: #020331;
  font-size: 3.5rem;
  text-shadow: 8px 8px 10px rgb(165, 149, 149);
  text-align: center;
  padding-bottom: 40px;
}

h2{
  color: #020331;
  padding-top: 10px;
  padding-bottom: 20px;
  text-shadow: 10px 10px 10px rgb(165, 149, 149);
  text-align: center;
}

/*Btn General*/
.btn-turnos{
  border: 1px solid #020331;
  border-radius: 30px ;
  border-color: #020331;
  background-color: #020331;
  color:#e6e3ea ;
  font-size: large;
  padding: 12px;
  text-decoration: none;
  margin-bottom: 18px;
}

.btn-turnos:hover{
  background-color:#020331cd;
  border-radius:1px solid #020331;
  color:#e6e3ea;
}

/*-Btn volver inicio*/
.image-container {
  position: relative; /* Establece un punto de referencia para el posicionamiento absoluto.El contenedor es el punto de referencia */
}

.back-link {
  position: relative;/* Posiciona el enlace absolutamente dentro del contenedor */
  bottom: 15px;/* Ajusta la distancia desde el borde inferior */
  left: 60px;/* Ajusta la distancia desde el borde derecho */
  text-decoration: none; /* Elimina el subrayado del enlace */
  color: #e6e3ea; /* Color del texto */
  background-color: #57565eca; /* Color de fondo del enlace */
  padding: 10px;
  border-radius: 30px; /* Bordes redondeados */
}
.back-link:hover {
  background-color:#57565e5e; /* Cambia el color del texto */
  color: #57565eca;/* Cambia el color del texto */
}

                    /*BARRA NAVEGACION*/
/*Barra contacto + redes socilaes*/

.card{
  background-color: #de3431;
  border-radius: 0px;
}

/*texto linea*/
.navbar-text{
  color:#020331;
  font-weight: 600;
  font-size: large;
  }

/*redes sociales*/
.red-social1{
  display: flex; /*Habilita el modelo de diseño Flexbox para el contenedor red-social. Utiliza Flexbox para controlar el espaciado */
  justify-content: center; /*  Centra los elementos hijos (li) horizontalmente dentro del contenedor.Centra los elementos horizontalmente */
}

.social1{
  list-style: none;/* Elimina los marcadores de lista */
  margin: 0px 2px; /*: Agrega un margen de 10px a la izquierda y a la derecha de cada elemento li, creando espacio entre los iconos. Agrega un margen de 10px a cada lado de cada elemento */
  font-size: 20px;
  color: #020331;
  vertical-align: middle;
  line-height: 1px;
}

.social1:hover{
  color: #02033180;
}

/*Barra de logo + btn pdo*/
.navbar{
  background-color: #020331;
}

/*logo + texto*/
.navbar-brand {
  color: #de3431;
  font-size: x-large;
  margin-left: 100px;
}

.navbar-brand:hover{
  color:#de343185;
}

/*separacion logo+texto*/
.imglogo{
  margin-right: 10px;
}

/*btn area privada*/
.btn-pdo  {
  border: 3px solid #de3431;
  border-radius: 18px;
  text-decoration: none;
  background-color: #020331;
  color:#de3431 ;
  font-size: large;
  margin-left: 230px;
  margin-right: 100px;
  margin-bottom: 13px;
  padding: 6px;
}

.btn-pdo:hover{
  color:#de343185 ;
}

/*linea divisoria*/
.navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px; /* Ajusta el grosor de la línea */
  background-color: rgba(211, 218, 211, 0.452);
  box-shadow: 15px 2px 5px rgba(0, 0, 0, 0.3);
}

                    /*PAGINA INICIO*/
/*Seccion Hero*/
section{
  background-color: #e6e3ea;
}

.row{
  display: flex;
  justify-content: center;
  align-items:center;
}

/*Seccion Prestadores*/
.prestadores{
  background-image: url(./imagen/dra+paciente2.jpg);
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(65%);
}

/*caja prestadores*/
.caja-prestadores{
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  flex-wrap: wrap;
}

/*texto prestadores*/
.huno-prest{
  font-size: 3.5rem;
  color: #020331;
  text-shadow: 8px 5px 10px rgb(19, 18, 18);
  padding-top: 20px;
  padding-bottom: 5px;
  text-align: center;
}

.hdos-prest{
  color: #020331;
  padding-top: 5px;
  padding-bottom: 10px;
  text-shadow: 10px 5px 10px rgb(56, 54, 54);
  text-align: center;
}

/*Acordion*/
#caja-acordiones{
  padding-bottom: 40px;
}
.accordion-top {
  display: flex;
  flex-direction: column;
}

.flex-container{
  margin-left: 17%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
}

.container-accordion{
  margin-bottom: 10px;
  background-color: #e6e3ea;
  /*opacity: 0.9;*/
  border-radius: 18px;
  border:1px solid #020331 ;
  font-size: 20px;
  gap: 20px;
  margin: 10px;
}

.accordion-item {
  display: flex;
  flex-direction: column;
}

/*btn acordion*/
.accordion-button{
  color:#020331;
  font-size: smaller;
  text-shadow: 10px 5px 10px rgb(56, 54, 54);/*La sombra se desplaza 10 píxeles hacia la derecha , 5 píxeles hacia abajo.El radio de desenfoque es de 10 píxeles, lo que crea una sombra bastante difusa.*/
  max-width: 100%;/* El botón ocupará como máximo el 100% del ancho disponible */
  width: 100%; /* Ocupa todo el ancho disponible */
  padding: 10px;
}

.accordion-button:hover{
  color: rgb(76, 74, 74);
}

.accordion-a{
  color: black;
  text-decoration: none;
}

.accordion-a:hover{
  color: rgb(87, 80, 80);
}

.accordion-item {
  display: flex;
  flex-direction: column;
}

/*icono acordion*/
.icono-salud{
  width: 35px;
  margin-left:12px ;
  margin-top: 10px;
  margin-right:12px ;
}

                    /*PAGINA TURNOS*/

/*Sacar Turno*/
.sacar-turnos {
  position: relative;
}

.sacar-turnos{
  background-image: url(/imagen/arbolBcoDegradadojpeg.jpg);
  background-color: #e6e3ea;
  background-position: center;
  background-size: cover;
}

.sacar-turnos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px; /* Ajusta el grosor de la línea */
  background-color: rgba(211, 218, 211, 0.452);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); /* Crea la sombra  */
}
/*encabezado*/
.huno-turnos{
  font-family: "Sarabun", serif;
  color:#020331 ;
  font-weight: 600;
  text-shadow: 2px 2px 4px #00000033 ;
  text-align: center;
  padding-top: 40px;
}

/*ingrese DNI + cuadro completar*/
.contenedor-form{
  text-align: center;
}

#form input{
  margin-top: 30px;
}

#form label{
  color: #020331;
  font-size: 30px;
  text-align: center;
}

/*Ya tiene su Turno*/
.titulo-turno{
  font-family: "Sarabun", serif;
  color:#020331 ;
  text-shadow: 2px 2px 4px #00000033 ;
}  

.form-turno{
  font-size: 20px;
  color: rgb(61, 59, 59);
  text-align: center;
}

h3{
  font-family: "Sarabun", serif;
  font-size: 20px;
  color: rgb(87, 80, 80);
  text-align: center;
}

.letra-roja{
  color: #de3431 !important;
  font-weight: 600;
  font-size: 30px;
  padding: 5px;
}

.titila {
  animation: titileo 1s infinite alternate;
}

@keyframes titileo {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}


.letra-gris{
  color: gray ;
  font-size: 30px;
  text-align: center;
}

.letra-gris:hover{
  color: rgb(52, 50, 50);
  text-decoration: none; 
}

/*Turnos Medico*/
.turnos-medico{
  background-image: url(/imagen/drabarbilla.png);
  background-position:90% 50% ;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #e6e3ea;
}

@media (max-width: 767px) {
  .turnos-medico {
    background-image: none; /* Quita la imagen de fondo */
  }
}

/*Texto turnos*/
.texto-turnos{
  padding-top: 18px;
  padding-bottom: 15px;
  padding-left: auto;
  margin-left: auto;
  margin-right: auto;
}

.huno-turno{
  font-family: "Sarabun", serif;
  font-weight: 600;
  color:#020331 ;
  text-shadow: 2px 2px 4px #0a0a0a33 ;
  text-align: center;
}

.lista-medico{
  font-family: "Sarabun", serif ;
  margin-left: 38px;
  text-align: start;
  color: #020331;
  font-size: 22px;
}

.negrita{
  font-weight: 600;
}

.chico p{
  margin: 0;
  font-size: 20px;
}

                    /*PAGINA REGISTRO*/
.registro{
  background-image: url(/imagen/draguiño.png) !important;
  background-position:80% 50% ;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #e6e3ea;
  }

@media (max-width: 767px) {
  .registro {
    background-image: none; /* Quita la imagen de fondo */
  }
} 

/*Datos medico y paciente*/
.titulo{
  font-family: "Sarabun", serif;
  color:#020331 ;
  text-shadow: 2px 2px 4px #00000033 ;
  text-align: start;
  font-weight: 600;
  padding-top: 20px;
}  

.dato{
  font-family: "Sarabun", serif;
  color:#020331 ;
  font-size: 25px;
  text-align: start;
}

/*formulario*/
.Form tr{
  height: 20px;
  color: #ce0909;
  font-weight:400 ;
}

.Form select{
  margin-left: 10px;
  margin-bottom: 10px;
}

/*btn registro*/
.btn-registro {
  border: 1px solid #020331;
  border-radius: 30px ;
  background-color: #020331;
  color:white ;
  font-size: large;
  padding: 12px;
  margin-left: 330px;
  margin-top: 22px;
  margin-bottom: 12px;
}

.btn-registro:hover{
  background-color:#020331cd;
  border-radius:1px solid #020331;
  color:#e6e3ea;
}

                /*PAGINA CALENDARIO*/

/*datos varios*/
.datos-varios{
  text-align: start;
  text-decoration: none;
  list-style: none;
}
h3{
  font-family: "Sarabun", serif;
  color: #020331;
  margin: 18px;
}

.titulo1{
  font-family: "Sarabun", serif;
  color: #020331;
  text-shadow: 2px 2px 4px #00000033;
  text-align: center;
}

.negrita{
  font-family: "Sarabun", serif;
  color: #020331;
}

/*cuadro calendario*/
.titulo-turno{
  font-family:"Sarabun", serif ;
  color: #57565e;
  text-shadow: 2px 2px 4px #00000033 ;
  padding-top: 22px;
  padding-bottom: 32px;
  text-align: center;
}

#calendar{
  font-family: "Sarabun", serif;
  max-width:400px ;
  min-width:218px ;
  max-height: 420px;
  min-height:300px ;
  text-align: center;
  background-color: #02033136;
  margin-bottom: 80px;
}

/*Horario del calendario*/
h5{
  font-family: "Sarabun", serif;
  color: #020331;
  text-shadow: 2px 2px 4px #00000033;
}

.horarios{
  color: #020331;
  font-size: medium;
}

.horarios:hover{
  color: rgb(60, 57, 57);
}

.sin-turno-rojo{
  font-family: "Sarabun", serif;
  font-size: medium!important;
  text-align: center;
  color: #de3434;
}

                    /*PAGINA ACEPTACION TURNO*/

.aceptacion-turno{
  background-image: url(/imagen/docafirmandosinfondo.png);
  background-color: #e6e3ea;
  background-position:80% 70% ;
  background-size: contain;
  background-repeat: no-repeat;
  min-height: 700px;
  }

@media (max-width: 800px) {
  .aceptacion-turno{
    background-image: none; /* Quita la imagen de fondo */
  }
}

/*lista aceptacion turno*/
.listord-aceptacion{
  padding-top: 25px;
  padding-bottom: 5px;
  font-size: 30px;
  text-shadow: 2px 2px 4px #00000033 ;
  color: #020331;
}

.titulo{
  font-family:"Sarabun", serif ;
  color:#020331 ;
  text-shadow: 2px 2px 4px #00000033 ;
  font-size: 28px;
  text-align: start;
  padding-top: 50px;
  padding-left: 220px;
}  

.titila {
  animation: titileo 1s infinite alternate;
}

@keyframes titileo {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.dato{
  font-family: "Sarabun", serif;
  color: #020331;
  font-size: 25px;
  text-align: start;
  padding-left: 220px;
}

                    /*FOOTER*/

footer::before {
  content: "";
  top: 0;
  left: 0;
  right: 0;
  height: 2px; /* Ajusta el grosor de la línea */
  background-color: rgba(211, 218, 211, 0.452);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

.seccion-clara{
  background-color:  #020331;
}

.img-footer{
  width: 45px;
  height: 45px;
}

.text-footer{
  margin-top: 15px;
}

.footer-texto-copy{
  color: #ce0909;
  font-weight: 600;
  padding-right: 20px;
}

/*redes sociales*/
.red-social{
  display: flex; /*Habilita el modelo de diseño Flexbox para el contenedor red-social. Utiliza Flexbox para controlar el espaciado */
  justify-content: center; /*  Centra los elementos hijos (li) horizontalmente dentro del contenedor.Centra los elementos horizontalmente */
}

#redsoc{
  margin-bottom: 19px;
}

.social{
  list-style: none;/* Elimina los marcadores de lista */
  margin: 0px 2px; /*: Agrega un margen de 10px a la izquierda y a la derecha de cada elemento li, creando espacio entre los iconos. Agrega un margen de 10px a cada lado de cada elemento */
  font-size: 20px;
  color: #de3431;
  vertical-align: middle;
  line-height: 1px;
}

.social:hover{
  color: #de343164;;
}